<template>
  <div class="custom-pagination">
    <div class="pagination-wrapper">
      <el-pagination
        v-model:current-page="innerCurrent"
        v-model:page-size="innerSize"
        :page-sizes="pageSizes"
        :total="total"
        :layout="layout"
        :background="background"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
        <template #default>
          <span class="pagination-total">共 {{ total }} 条</span>
        </template>
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    required: true
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100]
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  background: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:currentPage', 'update:pageSize', 'page-change'])

const innerCurrent = ref(props.currentPage)
const innerSize = ref(props.pageSize)

watch(() => props.currentPage, (val) => {
  innerCurrent.value = val
})

watch(() => props.pageSize, (val) => {
  innerSize.value = val
})

const handleCurrentChange = (val) => {
  emit('update:currentPage', val)
  emit('page-change', { page: val, size: innerSize.value })
}

const handleSizeChange = (val) => {
  emit('update:pageSize', val)
  emit('page-change', { page: innerCurrent.value, size: val })
}
</script>

<style scoped>
.custom-pagination {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

:deep(.el-pagination) {
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next),
:deep(.el-pager li) {
  border-radius: 6px;
  margin: 0 4px;
  background: #f5f7fa;
}

:deep(.el-pagination .btn-prev:hover),
:deep(.el-pagination .btn-next:hover),
:deep(.el-pager li:hover) {
  color: #409eff;
  background: #ecf5ff;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #409eff;
  color: #fff;
}

.pagination-total {
  margin-right: 15px;
  color: #606266;
}
</style>